I currently build and deploy my VueJS webapp (created via vue3 cli) in a http2 service in aws ec2.
Before deploying, I run npm run build which is package.json as "build": vue-cli-service build
Most of the times, the deployment to aws ec2 is good and webpage loads fine in public internet.
Sometimes, I have following error
Warning: The script from "https:/websitedomain.com/js/chunk-vendors.sdadd234.js" was loaded even though its MIME type ("text/html") is not a valid Javascript MIME type. Error: Uncaught SyntaxError: expected expression, got '<'
Result
The webpage is blank white page with no data.
Some investigation
Found that Vue injects js and css files into my public/index.html" and when i see "View page source" on blank page, it has code like <script src="/js/chunk-vendors.sdadd234.js">
I am thinking if I can find a way to add "text/javascript" then the page would load just fine.
Has anyone faced this error before? How to solve this problem?
For others that end up in this situation
I did not see this problem any more. Only thing I changed is how the build and deployment stages are in my website development.
Previously
npm run serve - to verify everything looks good in localnpm run build and git commit . - This steps is to generate those build files(compressed js, css..) in distgit push, my settings in AWS pipelines take care of updating files in dist directory to all my EC2 hosts service the website.** New process **
npm run serve - to verify everything looks good in localgit commit . - No build phasegit pushbuild and deploy to EC2 hosts)